<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('首页模块授权')">
            <el-tree
              ref="homeModuleTree"
              :data="homeTree"
              :indent="10"
              show-checkbox
              node-key="id"
              :empty-text="$t('加载中，请稍后')"
              :props="defaultProps"
              style="max-width: 200px;"
            >
              <span slot-scope="{ node }" style="overflow: hidden;text-overflow: ellipsis;">
                <span>{{ $t(node.label) }}</span>
              </span>
            </el-tree>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('模板名称')" prop="name">
                <el-input v-model="form.name" :placeholder="$t('模板名称')" show-word-limit :maxlength="50" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('备注')" prop="remark">
                <el-input v-model="form.remark" type="textarea" :placeholder="$t('备注')" show-word-limit :maxlength="1000" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('展示模块')" prop="showModulesList">
                <el-select v-model="form.showModulesList" multiple clearable :placeholder="$t('展示模块')">
                  <el-option
                    v-for="dict in showModulesOptions"
                    :key="dict.dictValue"
                    :label="$t(dict.dictLabel)"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-if="form.showModulesList && form.showModulesList.includes('KJRH')" :span="24" style="margin-top:10px;">
              <div class="area-header">
                <span class="area-header-title">{{ $t('快捷入口') }}</span>
              </div>
              <el-table :data="form.quickEntryList" border class="nowrapTable formTable">
                <el-table-column :label="$t('快捷入口')" align="center" prop="configId">
                  <template slot="header" slot-scope="{}">
                    <i style="color: #ff4949;margin-right: 4px;">*</i>
                    <span>{{ $t('快捷入口') }}</span>
                  </template>
                  <template slot-scope="scope">
                    <el-form-item :prop="'quickEntryList.' + scope.$index + '.configId'" :rules="quickRules">
                      <el-select v-model="scope.row.configId" :placeholder="$t('快捷入口')">
                        <el-option
                          v-for="(item, index) in quickOptions"
                          :key="index"
                          :label="$t(item.name) + (item.scene ? '-' + selectDictLabel(sceneOptions,item.scene) : '')"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('排序')" width="220px" align="center" prop="orderNum">
                  <template slot-scope="scope">
                    <el-input-number v-model="scope.row.orderNum" :min="0" />
                  </template>
                </el-table-column>
                <el-table-column :label="$t('操作')" align="center" width="80">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="delQuickEntry(scope.$index)">{{ $t('删除') }}</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="tol">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addQuickEntry">{{ $t("添加") }}</el-button>
              </div>
            </el-col>
            <el-col v-if="form.showModulesList && form.showModulesList.includes('GJZB')" :span="24" style="margin-top:10px;">
              <div class="area-header">
                <span class="area-header-title">{{ $t('关键指标') }}</span>
              </div>
              <el-table :data="form.indicators" border class="nowrapTable formTable">
                <el-table-column :label="$t('指标名称')" align="center" prop="configId">
                  <template slot="header" slot-scope="{}">
                    <i style="color: #ff4949;margin-right: 4px;">*</i>
                    <span>{{ $t('指标名称') }}</span>
                  </template>
                  <template slot-scope="scope">
                    <el-form-item :prop="'indicators.' + scope.$index + '.configId'" :rules="indRules">
                      <el-select v-model="scope.row.configId" :placeholder="$t('指标名称')">
                        <el-option
                          v-for="(item, index) in indicatorsOptions"
                          :key="index"
                          :label="$t(item.name)"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('排序')" width="220px" align="center" prop="orderNum">
                  <template slot-scope="scope">
                    <el-input-number v-model="scope.row.orderNum" :min="0" />
                  </template>
                </el-table-column>
                <el-table-column :label="$t('操作')" align="center" width="80">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="delIndicators(scope.$index)">{{ $t('删除') }}</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="tol">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addIndicators">{{ $t("添加") }}</el-button>
              </div>
            </el-col>
            <el-col v-if="form.showModulesList && form.showModulesList.includes('YSX')" :span="24" style="margin-top:10px;">
              <div class="area-header">
                <span class="area-header-title">{{ $t('右上小模块') }}</span>
              </div>
              <el-table :data="form.topRightModules" border class="nowrapTable formTable">
                <template slot="header" slot-scope="{}">
                  <i style="color: #ff4949;margin-right: 4px;">*</i>
                  <span>{{ $t('模块名称') }}</span>
                </template>
                <el-table-column :label="$t('模块名称')" align="center" prop="configId">
                  <template slot-scope="scope">
                    <el-form-item :prop="'topRightModules.' + scope.$index + '.configId'" :rules="topRules">
                      <el-select v-model="scope.row.configId" :placeholder="$t('模块名称')">
                        <el-option
                          v-for="(item, index) in moduleOptions"
                          :key="index"
                          :label="$t(item.name)"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('排序')" width="220px" align="center" prop="orderNum">
                  <template slot-scope="scope">
                    <el-input-number v-model="scope.row.orderNum" :min="0" />
                  </template>
                </el-table-column>
                <el-table-column :label="$t('操作')" align="center" width="80">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="delTopRightModule(scope.$index)">{{ $t('删除') }}</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="tol">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addTopRightModule">{{ $t("添加") }}</el-button>
              </div>
            </el-col>
            <el-col v-if="form.showModulesList && form.showModulesList.includes('YXZ')" :span="24" style="margin-top:10px;">
              <div class="area-header">
                <span class="area-header-title">{{ $t('右下中模块') }}</span>
              </div>
              <el-table :data="form.lowerRightModules" border class="nowrapTable formTable">
                <template slot="header" slot-scope="{}">
                  <i style="color: #ff4949;margin-right: 4px;">*</i>
                  <span>{{ $t('模块名称') }}</span>
                </template>
                <el-table-column :label="$t('模块名称')" align="center" prop="configId">
                  <template slot-scope="scope">
                    <el-form-item :prop="'lowerRightModules.' + scope.$index + '.configId'" :rules="lowerRules">
                      <el-select v-model="scope.row.configId" :placeholder="$t('模块名称')">
                        <el-option
                          v-for="(item, index) in moduleOptions"
                          :key="index"
                          :label="$t(item.name)"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('排序')" width="220px" align="center" prop="orderNum">
                  <template slot-scope="scope">
                    <el-input-number v-model="scope.row.orderNum" :min="0" />
                  </template>
                </el-table-column>
                <el-table-column :label="$t('操作')" align="center" width="80">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="delLowerRightModule(scope.$index)">{{ $t('删除') }}</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="tol">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addLowerRightModule">{{ $t("添加") }}</el-button>
              </div>
            </el-col>
            <el-col v-if="form.showModulesList && form.showModulesList.includes('ZXD')" :span="24" style="margin-top:10px;">
              <div class="area-header">
                <span class="area-header-title">{{ $t('左下大模块') }}</span>
              </div>
              <el-table :data="form.lowerLeftModules" border class="nowrapTable formTable">
                <el-table-column :label="$t('模块名称')" align="center" prop="configId">
                  <template slot="header" slot-scope="{}">
                    <i style="color: #ff4949;margin-right: 4px;">*</i>
                    <span>{{ $t('模块名称') }}</span>
                  </template>
                  <template slot-scope="scope">
                    <el-form-item :prop="'lowerLeftModules.' + scope.$index + '.configId'" :rules="configRules">
                      <el-select v-model="scope.row.configId" :placeholder="$t('模块名称')">
                        <el-option
                          v-for="(item, index) in moduleOptions"
                          :key="index"
                          :label="$t(item.name)"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('排序')" width="220px" align="center" prop="orderNum">
                  <template slot-scope="scope">
                    <el-input-number v-model="scope.row.orderNum" :min="0" />
                  </template>
                </el-table-column>
                <el-table-column :label="$t('操作')" align="center" width="80">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="delLowerLeftModule(scope.$index)">{{ $t('删除') }}</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="tol">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addLowerLeftModule">{{ $t("添加") }}</el-button>
              </div>
            </el-col>
            <el-col v-if="form.showModulesList && form.showModulesList.includes('YDD')" :span="24" style="margin-top:10px;">
              <div class="area-header">
                <span class="area-header-title">{{ $t('移动端模块') }}</span>
              </div>
              <el-table :data="form.lowerMobileModules" border class="nowrapTable formTable">
                <el-table-column :label="$t('模块名称')" align="center" prop="configId">
                  <template slot="header" slot-scope="{}">
                    <i style="color: #ff4949;margin-right: 4px;">*</i>
                    <span>{{ $t('模块名称') }}</span>
                  </template>
                  <template slot-scope="scope">
                    <el-form-item :prop="'lowerMobileModules.' + scope.$index + '.configId'" :rules="configRules">
                      <el-select v-model="scope.row.configId" :placeholder="$t('模块名称')">
                        <el-option
                          v-for="(item, index) in moduleOptions"
                          :key="index"
                          :label="$t(item.name)"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('排序')" width="220px" align="center" prop="orderNum">
                  <template slot-scope="scope">
                    <el-input-number v-model="scope.row.orderNum" :min="0" />
                  </template>
                </el-table-column>
                <el-table-column :label="$t('操作')" align="center" width="80">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="delLowerMobileModule(scope.$index)">{{ $t('删除') }}</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="tol">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addLowerMobileModule">{{ $t("添加") }}</el-button>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存，保存并启动流程，取消 三个按钮-->
      <el-button @click="cancel">{{ $t("取消") }}</el-button>
      <el-button v-hasPermi="['system:hometemplate:edit']" type="primary" @click="submitForm">{{ $t("保存") }}</el-button>
    </div>
  </div>
</template>

<script>
    import { saveHomeTemplate, getHomeTemplate, getDictData, getHomeModuleTree } from '@/api/system/home/template/homeTemplate'
    import { selectDictLabel } from '@/utils/ruoyi'
    // import ConfigDetail from '@/components/ConfigDetail'
    export default {
      components: {
        // ConfigDetail
      },
        data() {
            return {
                // 表单参数
                form: {
                  // 关键指标
                  indicators: [],
                  // 右上小模块
                  topRightModules: [],
                  // 右下中模块
                  lowerRightModules: [],
                  // 左下大模块
                  lowerLeftModules: [],
                  // 快捷入口
                  quickEntryList: []
                },
                defaultProps: {
                  children: 'children',
                  label: 'label'
                },
                indicatorsOptions: [],
                moduleOptions: [],
                quickOptions: [],
                conditionsOptions: [],
                // 遮罩层
                loading: false,
                // 所有组件Tree结构
                homeTree: [],
              sceneOptions: [],
                // 表单校验
                rules: {
                  name: [
                    { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
                  ],
                  configId: [
                    { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
                  ],
                  orderNum: [
                    { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
                  ]
                },
                quickRules: {
                  configId: [{ required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }]
                },
                indRules: {
                  configId: [{ required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }]
                },
                topRules: {
                  configId: [{ required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }]
                },
                lowerRules: {
                  configId: [{ required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }]
                },
                configRules: {
                  configId: [{ required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }]
                },
              showModulesOptions: []
            }
        },
        created() {
          this.getDicts('scene').then(res => {
            this.sceneOptions = res.data
          })
          getDictData().then(response => {
            this.indicatorsOptions = response.data.indicators
            this.moduleOptions = response.data.modules
            this.quickOptions = response.data.quicks
          })
          this.getDicts('home_show_modules').then(res => {
            this.showModulesOptions = res.data
          })
        },
        methods: {
          selectDictLabel,
            // 初始化数据
            init(data) {
                this.getModuleTreeSelect()
                this.loading = true
                if (data != null && data.id !== undefined) {
                    getHomeTemplate(data.id).then(response => {
                      debugger
                      console.log(response.data.homeTemplatePermissionIdList)
                        this.form = response.data
                        this.$refs.homeModuleTree.setCheckedKeys(response.data.homeTemplatePermissionIdList)
                        this.loading = false
                    })
                } else {
                    this.$refs.homeModuleTree.setCheckedKeys([])
                    this.reset()
                    this.loading = false
                }
            },
            // 表单重置
            reset() {
                this.form = {
                id: undefined,
                name: undefined,
                remark: undefined,
                createBy: undefined,
                createTime: undefined,
                updateBy: undefined,
                updateTime: undefined,
                delFlag: undefined,
                // 关键指标
                indicators: [],
                // 右上小模块
                topRightModules: [],
                // 右下中模块
                lowerRightModules: [],
                // 左下大模块
                lowerLeftModules: [],
                // 移动端模块
                lowerMobileModules: [],
                // 快捷入口
                quickEntryList: [],
                  showModulesList: [
                    'KJRH',
                    'GJZB',
                    'YSX',
                    'YXZ',
                    'ZXD',
                    'YDD'
                  ]
                }
                this.resetForm('form')
            },
            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
                this.$parent.$parent.reset()
            },
            // 关闭form页面
            closeForm() {
                // 关闭form页面遮罩层
                this.loading = false
                // 关闭form页面
                this.$parent.$parent.formOpen = false
                // 刷新list页面
                this.$parent.$parent.getList()
            },
            /** 提交按钮 */
            submitForm: function() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.loading = true
                        // 保存有权访问的组件
                        var homeTemplatePermissionList = this.$refs.homeModuleTree.getCheckedNodes(true)
                        var homeTemplatePermissionIdList = []
                        for (var i = 0; i < homeTemplatePermissionList.length; i++) {
                          if (homeTemplatePermissionList[i].id !== null) {
                            homeTemplatePermissionIdList.push(homeTemplatePermissionList[i].id)
                          }
                        }
                        this.form.homeTemplatePermissionIdList = homeTemplatePermissionIdList
                        saveHomeTemplate(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess(this.$t('保存成功'))
                                this.closeForm()
                            } else {
                                this.msgError(response.msg)
                                this.loading = false
                            }
                            this.loading = false
                        })
                    }
                })
           },
          /** 查询菜单树结构 */
          getModuleTreeSelect() {
            getHomeModuleTree().then(response => {
              debugger
              this.homeTree = response.data
            })
          },
          // 添加快捷入口
          addQuickEntry() {
            const row = {
              id: undefined,
              type: 'Q',
              configId: undefined,
              orderNum: this.form.quickEntryList.length + 1,
              templateId: undefined
            }
            if (!(this.form.quickEntryList instanceof Array)) {
              this.$set(this.form, 'quickEntryList', [])
            }
            this.$nextTick(() => {
              this.form.quickEntryList.push(row)
            })
          },
          // 添加关键指标
          addIndicators() {
            const row = {
              id: undefined,
              type: 'I',
              configId: undefined,
              orderNum: this.form.indicators.length + 1,
              templateId: undefined
            }
            if (!(this.form.indicators instanceof Array)) {
              this.$set(this.form, 'indicators', [])
            }
            this.$nextTick(() => {
              this.form.indicators.push(row)
            })
          },
          // 添加右上小模块
          addTopRightModule() {
            const row = {
              id: undefined,
              type: 'X',
              configId: undefined,
              orderNum: this.form.topRightModules.length + 1,
              templateId: undefined
            }
            if (!(this.form.topRightModules instanceof Array)) {
              this.$set(this.form, 'topRightModules', [])
            }
            this.$nextTick(() => {
              this.form.topRightModules.push(row)
            })
          },
          // 添加右下中模块
          addLowerRightModule() {
            const row = {
              id: undefined,
              type: 'Z',
              configId: undefined,
              orderNum: this.form.lowerRightModules.length + 1,
              templateId: undefined
            }
            if (!(this.form.topRightModules instanceof Array)) {
              this.$set(this.form, 'lowerRightModules', [])
            }
            this.$nextTick(() => {
              this.form.lowerRightModules.push(row)
            })
          },
          // 添加左下大模块
          addLowerLeftModule() {
            const row = {
              id: undefined,
              type: 'D',
              configId: undefined,
              orderNum: this.form.lowerLeftModules.length + 1,
              templateId: undefined
            }
            if (!(this.form.topRightModules instanceof Array)) {
              this.$set(this.form, 'lowerLeftModules', [])
            }
            this.$nextTick(() => {
              this.form.lowerLeftModules.push(row)
            })
          },
          // 添加移动端模块
          addLowerMobileModule() {
            const row = {
              id: undefined,
              type: 'M',
              configId: undefined,
              orderNum: this.form.lowerMobileModules.length + 1,
              templateId: undefined
            }
            if (!(this.form.topRightModules instanceof Array)) {
              this.$set(this.form, 'lowerMobileModules', [])
            }
            this.$nextTick(() => {
              this.form.lowerMobileModules.push(row)
            })
          },
          delLowerMobileModule(index) {
            this.form.lowerMobileModules.splice(index, 1)
          },
          delQuickEntry(index) {
            this.form.quickEntryList.splice(index, 1)
          },
          delIndicators(index) {
            this.form.indicators.splice(index, 1)
          },
          delTopRightModule(index) {
            this.form.topRightModules.splice(index, 1)
          },
          delLowerRightModule(index) {
            this.form.lowerRightModules.splice(index, 1)
          },
          delLowerLeftModule(index) {
            this.form.lowerLeftModules.splice(index, 1)
          }
        }

    }
</script>
